body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
fieldset,img{border:0;display: block;}
table{border-collapse:collapse;border-spacing:0}
li{list-style:none}
a,a:hover{text-decoration:none;}
.hide{
	display: none;
}
html,body{width:100%;height: 100%;}
@keyframes fadeIn {
	from {
	  opacity: 0;
	}
	to {
	  opacity: 1;
	}
}
@-webkit-keyframes rubberBand {
	from {
	  transform: scale3d(1, 1, 1);
	}
	30% {
	  transform: scale(1.25, 0.75);
	}
	40% {
	  transform: scale(.75, 1.25);
	}
	50% {
	  transform: scale(1.05, 0.85);
	}
	65% {
	  transform: scale(.75, 1.25);
	}
	75% {
	  transform: scale(1.25, .75);
	}
	to {
	  transform: scale(1, 1);
	}
}
@keyframes fadeUp {
	from {
	  opacity: 0;
	  top:0px;
	}
	to {
	  opacity: 1;
	  top:-14px;
	}
}
@keyframes wobble {
	from {
	  transform: translate3d(0, 0, 0);
	}
  
	15% {
	  transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	}
  
	30% {
	  transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}
  
	45% {
	  transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	}
  
	60% {
	  transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}
  
	75% {
	  transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	}
  
	to {
	  transform: translate3d(0, 0, 0);
	}
  }
  
.wobble {
	animation: wobble .3s ease;
}
.rubber-band{
	animation: rubberBand 1s ease;
}
.fade-in{
	animation: fadeIn .8s ease;
}
.fade-in-slow{
	animation: fadeIn 1.2s ease-in;
}
.fade-up{
	animation: fadeUp .8s ease-in;
}
body {
	-webkit-touch-callout: none;
	background-color: #fff;
	color:#333;
	position: relative;
	font-size: 14px;
	max-width: 750px;
	margin:0 auto;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.wrap{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
.hideItem{
	display: none;
}
.absolute{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.video{
	z-index: 1000;
}
.fg{
	top:initial;
	bottom: 0;
}
.play-start{
	position: absolute;
    left: 35%;
    bottom: 57px;
    width: 30%;
    margin: 0 auto;
    text-align: center;
    font-size: 12pt;
}
.play-start-icon{
	width: 80px;
	height: 80px;
	background: url(../images/icon_kaishiyouxi.png) no-repeat 0 0;
	background-size: 80px 80px;
	margin:0 auto;
	margin-bottom: 10px;
}
.info-like{
	position: absolute;
    top: 20pt;
    right: 0;
    width: 90pt;
}
.info-like-item{
	width: 100%;
	height: 30pt;
	line-height: 30pt;
	background: #fff;
	border-top:1px solid #333;
	border-bottom: 1px solid #333;
	box-sizing: border-box;
	margin-bottom: 18pt;
	position: relative;
}
.info-like-item .img{
	width: 34pt;
    height: 34pt;
    border-radius: 34pt;
    background: url(../images/0.jpg) no-repeat 0 0;
    background-size: 34pt 34pt;
    position: absolute;
    top: -3pt;
    left: -17pt;
    border: 1px solid #333;
    box-sizing: border-box;
}
.info-like-item .text{
	width: 52pt;
    margin: 0 auto;
    font-size: 15pt;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-like-item .text .icon{
	width: 28px;
    height: 28px;
    /* background: url(../images/icon_xin.png) no-repeat 0 0/28px 28px; */
}
.info-like-item .text .icon img{
	width: 100%;
	height: 100%;
}
.info-like-item .score{
	position: relative;
	padding-left: 9px;
}
.score-tip{
	position: absolute;
    top: 1px;
    left: 100%;
	font-size: 12pt;
	opacity: 0;
}

.info-reply{
	position: absolute;
    width: 93%;
    left: 3.5%;
    bottom: 27px;
}
.info-reply-head{
	width: 135pt;
    height: 35pt;
    background: rgba(0,0,0,0.5);
    border-radius: 44pt;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding-left: 30pt;
    font-size: 13pt;
    line-height: 35pt;
}
.reply-head-img{
	width: 40pt;
    height: 40pt;
    border-radius: 40pt;
    position: absolute;
    top: -5px;
    border: 1px solid #333;
    left: 0;
    background: url(../images/0.jpg) no-repeat 0 0;
    background-size: 40pt 40pt;
}
.info-reply-body{
	margin-top:12pt;
}
.reply-item{
	width: 100%;
    font-size: 12pt;
    padding: 14px 23px;
    background: #FF8F5E;
    border-radius: 6pt;
    background-size: 100% 100%;
    box-sizing: border-box;
	margin-bottom: 6pt;
	color: #fff;
}
.info-reply-footer{
	color: #fff;
	text-align: center;
	font-size: 12pt;
	margin-top: 30pt;
}
.play-os,.play-dialog{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 65px;
	padding: 0 4%;
	box-sizing: border-box;
	font-size: 12pt;
}
.play-phone{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 153px;
	padding: 26px 4%;
	box-sizing: border-box;
	font-size: 12pt;
	color: #fff;
	background: url(../images/phone-bg.png) no-repeat 0 0/100% 100%;
}
.phone-content{
	position: relative;
	z-index: 2;
	padding: 15px;
}
.os-name,.dialog-name{
	color: #fff;
	position: absolute;
	top: -9pt;
	left: 23pt;
	text-align: center;
	min-width: 115px;
	height: 24px;
	line-height: 24px;
	background: url(../images/pic_duihua.png) no-repeat 0 0;
	background-size:100% 100%; 
	letter-spacing: 2px;
	padding: 0 15px;
}
.dialog-name{
	left: 30pt;
	box-sizing: border-box;
	padding: 0 25px;
}
.dialog-name.user{
	background: url(../images/pic-duihua2.png) no-repeat 0 0/100% 100%;
}
.dialog-name i{
	display: block;
	position: absolute;
	top: -9px;
    left: -15px;
	width: 40px;
	height: 40px;
	border-radius: 40px;
}
.os-content,.dialog-content{
	padding:15pt;
	border-radius: 16pt;
	background: rgba(0,0,0,0.45);
	color: #fff;	
}
.dialog-content{
	min-height: 60px;
	background: rgba(255,255,255,0.85);
	color: #333;
}
.os-content{
	padding:6pt 15pt;
	box-sizing: border-box;
	min-height: 104px;
}
.play-end{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: url(../images/pic_bg.png) no-repeat 0 0/100% 100%;
	z-index: 101;
	overflow-y: auto;
}
.end-head{
	padding-top:20pt;
}
.end-head-img{
	position: relative;
	width: 184px;
	height: 184px;
	border-radius: 184px;
	
	margin:0 auto;
	box-sizing: border-box;
	border: 6px solid #ffa233;
}
.end-head-img i{
	display: block;
	position: absolute;
	width: 144px;
	height: 54px;
	bottom: -15px;
	left: 20px;
	background: url(../images/pic_donghua.png) no-repeat 0 0;
	background-size: 144px 54px;
	z-index: 10;
}
.end-head-text{
	color: #fff;
	text-align: center;
	font-size: 16pt;
	margin-top: 20px;
	line-height: 1.6;
}
.end-head-text>div:first-child{
	font-size: 14pt;
}
.end-body{
	position: absolute;
    box-sizing: border-box;
    background: #fff;
    padding-bottom: 20px;
    width: 100%;
    top: 315px;
}
.end-body .item{
	width: 80%;
	margin:0 auto;
	color: #ff7433;
	text-align: center;
	font-size: 13pt;
	border:1px solid #ff7433;
	border-radius: 4pt;
	margin-top: 14pt;
	line-height: 35pt;
}
.end-body .first-item{
	background: #ff7433;
	color: #fff;
	margin-top: 50px;
}
.play-mu{
	background: #222;
}
.play-mu-name{
	width: 80%;
	margin:20% auto;
	color: #fff;
	font-size: 20px;
	text-align: center;
}
.play-mu-name h1{
	font-size: 24px;
}
.play-mu-name p{
	width: 20px;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 18px;
}
.play-start-text{
	margin-top: 20px;
	padding: 10px 20px;
	background: #ff7433;
	color: #fff;
	display: none;
}
.play-icon{
	position: absolute;
	top:20px;
	left: 20px;
	width: 46px;
	height: 46px;
	z-index: 100;
	display: none;
}
.play-icon .item{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;	
}
.play-icon .play{
	background: url(../images/yinyue_n.png) no-repeat 0 0/100% 100%;
}
.play-icon .pause{
	background: url(../images/yinyue.png) no-repeat 0 0/100% 100%;
}
.bg-opcity{
	background: #fff;
	z-index: 2;
}
.end-other{
	background: #ff7633;
	z-index: 101;
}
.play-video{
	background: #000;
	z-index: 1000;
}
.end-share{
	background: url(../images/share.png) no-repeat 0 0/100% 100%;
	display: none;
	z-index: 10000;
	position: fixed;
}
.play-tips{
	background: #000;
}
.play-start-tip{
	position: absolute;
	bottom: 48%;
	width: 100%;
	text-align: center;
	color: #fff;
}
.end-other-title{
	background: #eee;
    color: #888;
    letter-spacing: 1px;
	padding: 5px 20px;
	
}
.other-items{
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 0 20px;
}
.other-items li{
	position: relative;
	flex:0 0 69px;
	font-size: 13px;
	margin-top:20px;
}
.other-items .head-img{
	width: 69px;
	height: 69px;
	border-radius: 69px;
}
.other-items .head-img img{
	width: 100%;
}
.other-items .name{
	text-align: center;
	margin-top: 10px;
}
.gray{
	-webkit-filter: grayscale(100%);
}
.other-items .check{
	color: #fff;
	text-align: center;
	position: absolute;
	top:50px;
	left: 0;
	width: 100%;
}
.progress{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 5px;
}
.progress-inner{
	width: 0;
	height: 100%;
	background: #fb5d18;
	transition: width .5s;
}
.progress-text{
	margin-top: 5px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
}
.play-start-load{
	background: #000;
	z-index: 101;
}
.progress-start{
	position: absolute;
	top:48%;
	left: 5%;
	width: 90%;
	height: 10px;
	border-radius: 10px;
	overflow-y: hidden;
	background: rgb(252, 229, 220);
}
.progress-inner-start{
	width: 0;
	height: 100%;
	background: #fb5d18;
	transition: width;
}
.progress-text-start{
	margin-top: 5px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 49%;
    left: 0;
    width: 100%;
}



